<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">

        <el-form-item style="margin-right: 15px;">
          <el-input v-model="queryParams.cityname" placeholder="区域名称"></el-input>
        </el-form-item>




        <el-form-item>
          <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
        </el-form-item>

        <el-form-item>
          <!--   -->
        </el-form-item>


      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <el-table :data="regionPageData" style="width: 100%" border>
        <el-table-column label="上级区域" align="center">
          <template #default="scope">
            <span style="margin-left: 10px">
              <span v-if="scope.row.type === 0"></span>
              <span v-if="scope.row.type === 1">中国</span>
              <span v-if="scope.row.type === 2">{{ regionList.find(item => item.id === scope.row.pid)?.cityname
                }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="cityname" label="区域名称" align="center" />



        <el-table-column prop="status" label="状态" align="center" />
        <el-table-column label="操作">
          <template #default="scope">
            <!-- <el-button plain type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button plain type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </el-card>

    <!-- 修改弹框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="30%">
      <el-form :model="editForm" label-width="160px">
        <el-form-item label="区域名称">
          <el-input v-model="editForm.cityname" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">
            取 消
          </el-button>
          <el-button type="primary" @click="editItem">
            确 定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import RegionAPI from "@/api/region";

import {

  RegionForm,
  Region,
  RegionQuery,
  RegionPageVO
} from "@/api/region/model";

defineOptions({
  name: "Region",
  inheritAttrs: false,
});






const queryFormRef = ref(ElForm);


const editForm = reactive<RegionForm>({

});

const loading = ref(false);
const editDialogVisible = ref(false);


const total = ref(0);
// 搜索参数
const queryParams = reactive<RegionQuery>({
  pageNum: 1,
  pageSize: 10,
  cityname: '',
});

const regionList = ref<Region[]>([]);

const regionPageData = ref<RegionPageVO[]>();

const dialog = reactive({
  title: "",
  visible: false,
});

/**
 * 打开新增弹框
 */
function add() {
  editForm.id = null
  editForm.cityname = ""

}
/**
 * 打开修改弹框
 * @param row 
 */
function handleEdit(row: Region) {
  editForm.id = row.id;

  dialog.visible = true;
}

/** 查询 */
function handleQuery() {
  loading.value = true;
  RegionAPI.getPage(queryParams)
    .then((data) => {
      regionPageData.value = data.records;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}


/**
 * 保存修改
 */
function editItem() {
  // 当id存在时执行修改操作，否则执行新增操作
  if (editForm.id) {
    RegionAPI.update(editForm).then(() => {
      handleQuery();
      dialog.visible = false;
    })
  } else {
    RegionAPI.add(editForm).then(() => {
      handleQuery();
      dialog.visible = false;
    })
  }

}
function getFirstLevelData() {
  RegionAPI.getList(<RegionQuery>{}).then(res => {
    regionList.value = res
    handleQuery();
  })
}

function handleDelete(row: Region) {
  // 执行删除操作

}









onMounted(() => {
  getFirstLevelData()
});
</script>
